<script setup>
import { isEmpty } from "@/utils/tools";
import { aggregated } from "@/api/modules/generateVariableName.js";

const loading = ref(false);

const inputParams = ref({
  input: null,
  style: "SNAKE_CASE",
  channel: "GOOGLE",
});
const outputValue = ref(null);

// 搜索
const handleSearch = async () => {
  if (isEmpty(inputParams.value.input)) return ElMessage.error("语义文案不可为空");
  loading.value = true;
  try {
    const { data } = await aggregated(inputParams.value);
    outputValue.value = data;
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false;
  }
};
</script>

<template>
  <div class="generate-variable-name">
    <!-- 搜索框操作 -->
    <el-form
      :inline="true"
      :model="inputParams"
      @keyup.enter="handleSearch"
    >
      <!-- 风格 -->
      <el-form-item label="命名风格:">
        <el-select v-model="inputParams.style">
          <el-option
            label="蛇形"
            value="SNAKE_CASE"
          />
          <el-option
            label="驼峰式"
            value="CAMEL_CASE"
          />
          <el-option
            label="帕斯卡"
            value="PASCAL_CASE"
          />
          <el-option
            label="烤串"
            value="KEBAB_CASE"
          />
          <el-option
            label="尖叫蛇形"
            value="SCREAMING_SNAKE_CASE"
          />
          <el-option
            label="尖叫烤串"
            value="SCREAMING_KEBAB_CASE"
          />
        </el-select>
      </el-form-item>
      <!-- 渠道 -->
      <el-form-item label="生成渠道:">
        <el-select v-model="inputParams.channel">
          <el-option
            label="AI"
            value="AI"
          />
          <el-option
            label="谷歌"
            value="GOOGLE"
          />
        </el-select>
      </el-form-item>
      <!-- 语义文案 -->
      <el-form-item label="语义文案:">
        <el-input
          v-model="inputParams.input"
          clearable
          placeholder="请输入文案"
          style="width: 200px"
        />
      </el-form-item>
      <!-- 操作按钮 -->
      <el-form-item style="margin-right: 0">
        <el-button
          type="primary"
          @click="handleSearch"
          :disabled="loading"
          >开始生成</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 输入输出展示 -->
    <div
      class="main"
      v-loading="loading"
      element-loading-text="正在生成中..."
    >
      <span v-if="outputValue">{{ outputValue }}</span>
      <span
        v-else
        class="placeholder"
        >等待生成变量内容</span
      >
    </div>
  </div>
  <PageMain :dividerEnable="false"> </PageMain>
</template>

<style lang="scss" scoped>
.generate-variable-name {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-form {
    display: flex;
    .el-form-item {
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .el-select {
      width: 112px;
    }
  }
  .main {
    flex: 1;
    box-sizing: border-box;
    padding: 4px 6px;
    border: 1px solid var(--el-border-color);
    .placeholder {
      color: var(--el-border-color);
    }
  }
}
</style>
